import Image from "next/image";
import s from './myimage.module.css'
import abc from '../public/images/img.jpg'
import React from "react";
import fs from 'fs'
import path from 'path'
// image通过Next内置的Image组件来加载图片 除了Layout="fill"其余的都需要带上width和height属性
// 图片保存在pibilc文件夹里 图像优化在静态页面导出时不支持默认加载器，需要自己配置加载器

class Myimage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1
    }
    this.myRef = React.createRef();

    this.change = this.change.bind(this)
  }

  myLoader = ({src, width, quality}) => {
    return `http://localhost:3000/images/${src}`
  }

  mon() {
    this.setState({
      a: this.state.a + 1
    })
    console.log(this.myRef.current);
  }

  change(e) {
    this.setState({a: e.target.value})
  }

  render() {
    return (
      <div>
        <div>
          {/* 导入字体 */}
          <h3 className={s.webfont} onMouseDown={() => this.mon()}>明月几时有，自己抬头瞅</h3>
        </div>
        <h3 ref={this.myRef}>{this.state.a}</h3>
        <div>
          <input type="text" value={this.state.a} onInput={this.change}/>
        </div>
        {/* 视频 */}
        <div>视频(线上)
          <video width="1200" height="900" controls>
            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4"></source>
          </video>
        </div>
        <div>视频(本地)
          <video width="1200" height="900" controls>
            <source src="/videos/movie.mp4" type="video/mp4"></source>
          </video>
        </div>
        <Image
          onMouseUp={() => {
          mon(this)
        }}
          loader={this.myLoader}
          src='img.jpg'
          layout="intrinsic"
          height={200}
          width={190}
          alt="myimage"></Image>
        {/* <div className={s.fill}>fill  图像的宽度和高度都会拉伸到父元素的尺寸。
          <Image src="/images/img.jpg" layout="fill"></Image>
        </div>
        <div className={s.intrinsic}>intrinsic  默认，图像将缩小尺寸以适应较小的视口，但保持原始尺寸以适应较大的视口。
          <Image src="/images/img.jpg" width={200} height={200} layout="intrinsic"></Image>
        </div>
        <div className={s.responsive}>responsive 图像将缩小尺寸以适应较小的视口，并按比例放大以适应较大的视口。
          <Image src="/images/img.jpg" width={200} height={300} layout="responsive"></Image>
        </div>
        <div className={s.fixed}>fixed  图像尺寸不会随着视口的变化（无响应）而变化，类似于原生img元素。
          <Image src="/images/img.jpg" width={50} height={100} layout="fixed"></Image>
        </div> */}
      </div>
    )
  }
}

export async function getStaticProps(context) {
  const getfill = path.join(process.cwd(), 'pages/json/data01.json')
  const getdata = JSON.parse(await fs.readFileSync(getfill, 'utf-8'))
  return {props: {
      getdata
    }}
}

export default Myimage